import React from 'react';
import { Button,ButtonGroup,Thumbnail,Panel,ButtonToolbar,Well,Image } from 'react-bootstrap';
var Loading = require('react-loading');

import {movieApi} from '../apis/movie.js';

//视频播放页面
var MoviePlayerView= React.createClass({
  getInitialState: function () {
    return {
		playerurl:"",
		renderVideoed:false
    }
  },
  componentWillReceiveProps:function(){
	  this.props.cid =nextProps.cid
	  this.componentWillMount()
  },
  componentWillMount:function(){
	  this.setState({loaded:false});
    movieApi.getMoviePlayerUrl(this.props.cid)
      .then(function (ret) {
		console.log(ret)
		this.setState({
		  playerurl :ret,
		  loaded:true
        })
		
      }.bind(this))
  },
  
  componentDidMount :function(){
    this.renderVideo()
   
	 
  },
  renderVideo:function(){
	  if(document.getElementById("video1") &&
	    document.getElementById("v1")
	 ){
	  var inst1 = ABP.create(document.getElementById("video1"), {
					"src":document.getElementById("v1"),
					"mobile":false
	  });
	  (new CommentLoader(inst1.cmManager)).setParser(BilibiliParser).load("GET", "http://comment.bilibili.cn/"+this.props.cid+".xml");
	 }else{
		 var me=this ;
		 setTimeout(()=>{me.renderVideo();},500)
	 }
  },
  render:function(){
	 if(!this.state.loaded){
	     return (
	      <div className="container-fluid">
		    <Loading type='balls' color='#e3e3e3' />
		  </div>
	     )
	 }
	 else{
		 
		 return (
	        <div className="container-fluid">
		       <div id="video1">
			      
			   </div>
			   <video poster={this.props.pic}   id="v1" autobuffer="true" data-setup="{}"  width="672" height="510">
                    <source src={this.state.playerurl.durl[0].url} type="video/mp4"/>
                      您的浏览器不支持HTML5视频
                </video>
			 
		    </div>
	     )
	 }
  }
});

//视频分P页面
var MoviePageView= React.createClass({
  getInitialState: function () {
    return {
      pageList:[],
	  moviename:""
    }
  },
  componentWillReceiveProps:function(nextProps){
	  this.props.params.page =nextProps.params.page
	  this.componentWillMount()
  },
  componentWillMount:function(){
	  this.setState({loaded:false});
	  
	  
	  movieApi.getMovieView(this.props.params.aid)
      .then(function (ret) {
		this.setState({
		  pageList :ret.list,
		  moviename :ret.title,
		  info:ret,
		  loaded:true
        })
		//选中视频
		if(this.props.params.page && this.props.params.page>0){
		  this.setState({
		      pageList :[this.props.params.page]
           })
	    }
      }.bind(this))
  },
  render:function(){
	  var aid=this.props.params.aid
	  if(this.state.loaded){
	   
	   if(this.state.pageList.length>1){
	    return (
	       <Panel header={this.state.moviename}>  
		       
			     
			        <Well bsSize="large">{this.state.info.description}</Well>
					 
				   	<ButtonToolbar>
					    <ButtonGroup>
						{
                           this.state.pageList.map(function(s){
							  var url ="#/movie/"+aid+"/"+s.page;
							  return ( 
							   <Button href={url}>{s.page}</Button>
							   )
						   })
						}
                        </ButtonGroup>
					 </ButtonToolbar>			   
			   
			        <Image src={this.state.info.pic} responsive />
           </Panel>
	    )
	   }
	   else{
		    return (
	       <Panel header={this.state.moviename}>  
		       
			     
			        <Well bsSize="large">{this.state.info.description}</Well>
					 
				    <MoviePlayerView  cid={this.state.info.list[0].cid} pic={this.state.info.pic} moviename={this.state.moviename}></MoviePlayerView>			   
			        
           </Panel>
	       )
	   }
	  }
	  else
		  
	  return (
	       <Panel header={this.state.moviename}>  
		      <Loading type='balls' color='#e3e3e3' />
            </Panel>
	    )
  }
});

export {MoviePageView,MoviePlayerView};